<template>
<div>
  <!-- <common-head></common-head> -->
     <button class="back" @click="back"><van-icon name="arrow-left" /></button>
    <select class="select">
      <option value="1">成都</option>
      <option value="2">武汉</option>
    </select>

    <div class="list">
        <!-- 地图 -->
      <baidu-map
        :center="center"
        :zoom="zoom"
        @ready="handler"
        style="height:370px;white:100%"
        :scroll-wheel-zoom="true"
      ></baidu-map>
      <!-- 按钮 -->
      <p class="btns">
        <van-button plain  size="small" round @click="onLoad(0)" :style="click===0?Color:''">小米之家</van-button>
        <van-button plain  size="small" round @click="onLoad(1)" :style="click===1?Color:''">线下专区</van-button>  <span class="line">|</span>
        <van-button plain  size="small" round @click="onLoad(2)" :style="click===2?Color:''">服务网点</van-button>
        <van-button class="search" plain type="default">
          <van-icon name="search" />
        </van-button>
      </p>
    </div>
    <!-- 数据 -->
    <van-list @load="onLoad(0)" >
        <van-row v-for="item in list" :key="item.store_name" @click="getClickInfo(item)">
        <ul>
            <li :style="id===item.mihome_id?bgc:''">
                <div class="center">
                    <span class="title">{{item.store_name}}</span>
                    <div class="shoptime">{{item.shop_time}}</div>
                    <div class="addressDel">{{item.address}}</div>
                </div>
            </li>
        </ul>
        </van-row>
    </van-list>
    <common-footer></common-footer>
</div>
</template>
<script>
export default {
  propd: [],
  data () {
    return {
      center: { lng: 104.121644, lat: 30.656023 }, // 中心坐标
      zoom: 13,
      // 更改按钮颜色
      click: 0,
      Color: { color: '#FF9F5F!important', border: '1px solid #FF9F5F' },
      bgc: { backgroundColor: '#fffcf6!important' },
      id: '603',
      // 列表
      list: [],
      BMap2: null,
      map2: null,
      marker: null,
      // 标注的新图标
      icon: null,
      // 信息窗口
      opts: {
        width: 20, // 信息窗口宽度
        height: 10, // 信息窗口高度
        title: '小米之家成都万象城店' // 信息窗口标题
      }
    }
  },
  mounted () {

  },
  methods: {
    //  回退
    back () {
      window.history.go(-1)
    },
    //
    handler ({ BMap, map }) {
      // 引入Bmap对象
      this.BMap2 = BMap
      this.map2 = map
      // 新图标
      this.icon = new BMap.Icon('http://i8.mifile.cn/v1/a1/87fbaa8d-73a4-247a-acea-dea9fed47099.png', new BMap.Size(70, 70), {
        imageSize: new BMap.Size(70, 70)
      })
      // 创建窗口对象
      var infoWindow = new BMap.InfoWindow('', this.opts) // 创建信息窗口对象
      map.openInfoWindow(infoWindow, map.getCenter()) // 打开信息窗口

      var point = new BMap.Point(104.121644, 30.656023)// 标注坐标
      map.centerAndZoom(point, 13)// 地图初始化??

      // 创建标注对象,并修改marker的新图标
      this.marker = new BMap.Marker(point, { icon: this.icon })
      map.addOverlay(this.marker) // 将标注添加到地图中
    },
    // table
    async onLoad (i) {
      this.click = i
      const { data: res } = await this.$http.get('/user/userinfo')
      this.list = res.data.store_type_list[i].store_list
      console.log(this.list)
    },
    // 点击进入地图详情
    getClickInfo (item) {
      this.id = item.mihome_id
      this.opts.title = item.store_name// 提示框
      const lng = item.position.lng
      const lat = item.position.lat
      this.map2.removeOverlay(this.marker)// 移除标注
      this.center.lng = lng
      this.center.lat = lat
      var point = new this.BMap2.Point(lng, lat)
      this.map2.centerAndZoom(point, 13)
      // 创建标注对象,并修改marker的新图标
      this.marker = new this.BMap2.Marker(point, { icon: this.icon })
      this.map2.addOverlay(this.marker) // 将标注添加到地图中
      // 创建窗口对象
      var infoWindow = new this.BMap2.InfoWindow('', this.opts) // 创建信息窗口对象
      this.map2.openInfoWindow(infoWindow, this.map2.getCenter()) // 打开信息窗口
      setTimeout(() => {
        this.$router.push({
          path: '/mapDetail',
          name: 'MapDetail',
          params: { item }
        })
      }, 1000)
    }
  }
}
</script>
<style lang="less" scoped>
select{
    height: 25px;
    background: hsla(0,0%,100%,.9);
    border-radius: 10px;
    border: 1px solid #ccc;
    line-height: 25px;
    position: fixed;
    top: 20px;
    right: 10px;
    z-index: 11;
}
.back{
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #fff;
    border-radius: 15px;
    border: 1px solid #ccc;
    position: fixed;
    top: 20px;
    left: 10px;
    z-index: 11;
}
.van-button{
    background: hsla(0,0%,100%,.9);
    border: 1px solid #ccc;
    font-size: 12px;
    margin-left: 10px;
    line-height: 30px;
}
.btns{
    margin: 10px 10px 0 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid hsla(0,0%,80%,.3);
}
.line{
    // border: 1px solid #ccc;
    color: #ccc;
    margin: 10px 2px  10px 10px;
}
.search{
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    margin-left: 60px;

}
li{
    width: 100%;
    list-style: none;
    border-bottom: 1px solid hsla(0,0%,80%,.3);
}
.van-list{
    height: 250px;
    overflow-y: scroll
}
.center{
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 10px;
}
.title{
    // margin-top: 10px;
    font-size: 14px;
    color: #000;
    font-weight: 400;
}
.addressDel,.shoptime{
    margin-top: 3px;
    color: #3c3c3c;
    font-size: 12px;
}
</style>
